<template>
  <div>
    <div class="info flex">
      <div class="time flex column">
        <div
          v-for="(item,index) in yearList"
          :key="index"
          :class="[currentIndex === index ? 'active' : '']"
        >
          <span @click="changeYear(index)">{{ item }}</span>
        </div>
      </div>
      <div class="content">
        <h1>集团动态</h1>
        <section>
          <div
            v-for="(item,index) in listData"
            :key="index"
            class="section flex"
            v-show="item.year === yearList[currentIndex]"
          >
            <img :src="item.imgUrl" @click="openDialog(index)" class="pointer" />
            <article class="flex column">
              <h4 @click="openDialog(index)" class="pointer">{{ item.title }}</h4>
              <p>{{ item.summary }}</p>
              <span @click="openDialog(index)">阅读全文>></span>
            </article>
          </div>
        </section>
      </div>
    </div>
    <el-backtop>
      <div style="text-align: center;">
        <p>BACK</p>
        <p>TOP</p>
      </div>
    </el-backtop>
    <el-dialog
      :visible.sync="visible"
      :show-close="false"
      :lock-scroll="true"
      :destroy-on-close="true"
      :modal="true"
    >
      <template slot="title">
        <img src="@/assets/icon_close.png" @click="visible = false" />
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { infoData } from '@/utils/infoData'
export default {
  data() {
    return {
      yearList: [2021, 2020, 2019],
      currentIndex: 0,
      visible: false,
      detailInfo: {},
      listData: [
        {
          year: 2021,
          imgUrl: require('@/assets/202101.jpg'),
          title: '开域集团CEO施侃出席2021中国互联网大会并发表主题演讲',
          summary: '2021年7月13日，由中国互联网协会主办的2021（第二十届）中国互联网大会在北京国家会议中心……'
        },
        {
          year: 2021,
          imgUrl: require('@/assets/202102.jpg'),
          title: '开域集团创始人兼CEO施侃受邀出席2021中国网络视频年度高峰论坛并发表主题演讲',
          summary: '2021年5月29日，第六届中国网络视频学院奖暨2021中国网络视频年度高峰论坛在北京成功举办……'
        },
        {
          year: 2021,
          imgUrl: require('@/assets/202103.jpg'),
          title: '足球与酱酒跨界合作，茅头小子与开域集团携手英超狼队走向世界舞台',
          summary: '2021年5月26日，新贵酱香白酒品牌茅头小子与英超狼队足球俱乐部宣布正式确立官方合作伙伴关系……'
        },
        {
          year: 2021,
          imgUrl: require('@/assets/202104.jpg'),
          title: '开域集团斩获金鼠标数字营销大赛金奖',
          summary: '2021年4月23日晚，被业界誉为“数字营销风向标”的金鼠标数字营销大赛颁奖盛典在北京万达文华酒店……'
        },
        {
          year: 2021,
          imgUrl: require('@/assets/202105.jpg'),
          title: '开域集团通过英特尔行业整体解决方案项目MRS认证',
          summary: '2021年年初，开域集团凭借门店客流数字化解决方案与疫情防控一体机方案的优异表现……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202001.jpg'),
          title: '开域集团荣获2020中国新基建创新力量TOP10',
          summary: '2020年11月5日，由著名创投平台创业邦首度发布的“2020中国新基建创新力量TOP100”榜单重磅出炉……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202002.jpg'),
          title: '开域集团入榜24新声-2020年中国营销数字化服务商TOP30',
          summary: '2020年10月29日，由企名科技&24新声主办的“数字中国-2020年中国数字产业峰会”在京圆满结束……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202003.jpg'),
          title: '开域集团荣获2020中国数字生态500强-技术领域服务商大数据二十佳',
          summary: '2020年10月22日，备受业界瞩目的2020中国数字生态奖项评选在北京正式落下帷幕……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202004.jpg'),
          title: '开域荣获中国智慧零售行业年度评选全渠道数字化卓越贡献奖',
          summary: '2020年10月16日，第2届“智慧之星”中国智慧零售行业年度评选历时2个多月，200多位权威……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202005.jpg'),
          title: '开域集团获得腾讯广告2020上半年效果KA服务商官方铂金服务商授牌',
          summary: '2020年9月23日，“智慧融合 共生未来 - 2020腾讯广告渠道合作伙伴峰会”在上海隆重开幕……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202006.jpg'),
          title: '开域集团荣获2020中国数字生态英雄榜-企业社会责任奖',
          summary: '2020年9月3日，由B.P商业伙伴主办的，以“新基建·新生态·新未来”为主题的2020中国数字生态英雄会……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202007.jpg'),
          title: '数字势能 谋远共赢——开域集团携手新华网在京举行合作签约仪式',
          summary: '2020年8月28日，行业领先的数字科技平台开域集团与国家级权威媒体新华网，在京共同签署……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202008.jpg'),
          title: '开域集团入选《新冠战“疫”——中国数据智能产业最具社会责任感企业榜》',
          summary: '2020年8月4日消息，经过两个多月，专家评审团层层把关，开域集团凭借“开域疫情防控测温一体机”……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202009.jpg'),
          title: '开域集团荣获CSIC 2020云领奖年度最具创新SaaS服务商',
          summary: '2020年7月29-30日，由Top智汇、上海市软件行业协会主办的第五届SaaS应用大会在上海盛大召开……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202010.jpg'),
          title: '2020非凡大赏在沪举行 开域集团荣获非凡-典型案例奖',
          summary: '7月30日，2020非凡大赏产业数字化转型高峰论坛暨非凡奖颁奖典礼在上海隆重举行……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202011.jpg'),
          title: '喜讯 | 开域集团荣获爱分析“中国营销数字化厂商30强”',
          summary: '2020年4月16日，爱分析发布中国营销数字化厂商榜单，并公布前30强企业名单……'
        },
        {
          year: 2020,
          imgUrl: require('@/assets/202012.jpg'),
          title: '政企同心，携手抗疫 | 开域一体机防疫效果获赞',
          summary: '为应对新冠疫情，协助政府正常提供公共服务，保障人民出行安全，开域集团与上海市竖新镇政府……'
        },
        {
          year: 2019,
          imgUrl: require('@/assets/201912.jpg'),
          title: '开域集团斩获金触点全球商业创新大奖“事件及节日营销类铜奖”',
          summary: '2019年12月30日，2019年金触点全球商业创新大奖（后简称金触点大奖）颁奖典礼在北京新世界酒店……'
        },
        {
          year: 2019,
          imgUrl: require('@/assets/201911.jpg'),
          title: '以实鉴真，终局制胜：开域集团斩获腾讯广告实效营销行业全能先锋奖和突破创新奖两项大奖！',
          summary: '2019年10月24日，“以实鉴真”2019腾讯广告高峰论坛在上海开幕。峰会当晚……'
        },
        {
          year: 2019,
          imgUrl: require('@/assets/201910.jpg'),
          title: '开域集团斩获第六届移动智能营销金比特奖2019短视频营销标杆案例大奖',
          summary: '2019年9月5日，2019移动智能营销峰会暨第六届金比特奖颁奖盛典在北京隆重举行……'
        },
        {
          year: 2019,
          imgUrl: require('@/assets/201909.jpg'),
          title: '开域集团完成新一轮融资，领先打造数据科技业界独角兽',
          summary: '开域集团作为国内领先的一站式数字营销，于2019年8月13日对外宣布完成新一轮融资……'
        },
        {
          year: 2019,
          imgUrl: require('@/assets/201908.jpg'),
          title: '开域集团应邀出席沙利文2019中国新经济峰会，斩获“沙利文中国新经济奖​”',
          summary: '2019年7月18日，全球著名增长咨询公司Frost & Sullivan弗若斯特沙利文（以下简称“沙利文”）……'
        },
      ]
    }
  },
  methods: {
    changeYear(index) {
      this.currentIndex = index
    },
    openDialog(index) {
      this.visible = true
      this.$nextTick(() => {
        document.querySelector('.el-dialog__body').innerHTML = infoData[index]
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.info {
  .time {
    width: 220px;
    position: fixed;
    top: 0;
    bottom: 0;
    background: #000;
    color: #fff;
    font-size: 30px;
    border-right: 1px solid #eee;
    box-shadow: 0px 0px 50px 0px rgba(92, 101, 107, 0.5);
    div {
      flex: 1;
      text-align: center;
      display: flex;
      align-items: center;
      span {
        flex: 1;
        cursor: pointer;
        padding: 100px 0;
      }
      &.active {
        background: #0d2153;
      }
    }
  }
  .content {
    flex: 1;
    margin-left: 220px;
    background: #0d2153;
    h1 {
      text-align: center;
      color: #fff;
      font-weight: 400;
      font-family: PingFang;
      font-size: 60px;
    }
    section {
      width: 80%;
      margin: 0 auto;
      .section {
        background: rgba(0, 0, 0, 0.3);
        padding: 40px 45px;
        margin-bottom: 30px;
        img {
          width: 280px;
          height: 160px;
        }
        article {
          margin-left: 53px;
          justify-content: space-between;
          h4 {
            font-size: 30px;
            color: #fff;
            font-weight: 400;
            margin: 0;
          }
          p {
            font-size: 20px;
            margin: 0;
            font-family: PingFang SC;
            font-weight: 300;
            color: #dddddd;
          }
          span {
            color: #cb3b2e;
            font-size: 16px;
            font-family: PingFang;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>